<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/Introduction.css">
    <link href="/dev/plugins/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">
    <style>
        .singersyn{
            margin-top: 30px;
        }
        h2{
            margin: 28px 0 8px 0;
            color: #333;

        }
        i{
            margin-right: 7px;
            background: #c10d0c;
        }
         p{
            /*line-height: 25px;*/
            color: #666;
            /*text-indent: 2em;*/
        }
        #QPlayer{
            z-index:200;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<!--播放器-->
<div id="QPlayer">
    <div id="pContent">

        <div id="player">
            <span class="cover"></span>
            <div class="ctrl">
                <div class="musicTag marquee">
                    <strong>Title</strong>
                    <span> - </span>
                    <span class="artist">Artist</span>
                </div>
                <div class="progress">
                    <div class="timer left">0:00</div>
                    <div class="contr">
                        <div class="rewind icon"></div>
                        <div class="playback icon"></div>
                        <div class="fastforward icon"></div>
                    </div>
                    <div class="right">
                        <div class="liebiao icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ssBtn" style="background:#000 none repeat scroll 0% 0%">
            <div class="adf"></div>
        </div>
    </div>
    <ol id="playlist"></ol>
</div>
<div class="contai">
    <div class="g jjiel">
<!--        img地方-->
        <div class="g t">
                <div class="tt1">

                </div>

            <div class="layui-tab" lay-filter="test-hash">
                <ul class="layui-tab-title" style="">
                    <li class="layui-this" lay-id="11"style="width: 210px;"id="singersong">热门作品</li>
                    <li lay-id="22"style="width: 210px;"id="singersyn">歌手简介</li>
                    <li lay-id="33"style="width: 210px;">标签3</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div>
<!--                            <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" style="background-color:#16b777;">播放</button>-->
                            <table class="table caption-top">

                            </table>
                        </div>
                    </div>
                    <div class="layui-tab-item" >
                        <div class="singersyn"></div>
<!--                            <h2 style=" font-size: 14px;">-->
<!--                                <i>&nbsp;</i>-->
<!--                                林俊杰简介-->
<!--                            </h2>-->
<!--                        <p>吴莫愁（MoMo Wu），中国大陆新生代个性女歌手、新女性主义代言人、90后标志性人物。从小跟随父母亲开大篷车唱游全国，2012年凭《中国好声音》上出色表现获得全国总亚军，一举成名。莫愁拥有饱满的情绪、扎实的唱功、新颖的唱法和十足的欧美摇滚范儿，被誉为中国版的“lady gaga”。2012年，与庾澄庆合作单曲《我要给你》，年末获中国魅力50人、亚洲年度新锐歌手、年度艺人、全球最美50新人、年度女性榜样等奖项。</p>-->

                    </div>
                    <div class="layui-tab-item">内容-3</div>

                </div>
            </div>
<!--            <div class="gtable">-->
<!--                <table>-->
<!--                    <tbody>-->
<!--                    <tr>-->
<!--                        <td></td>-->
<!--                        <td></td>-->
<!--                        <td></td>-->
<!--                        <td></td>-->
<!--                    </tr>-->
<!--                    </tbody>-->
<!--                </table>-->
<!--            </div>-->
        </div>
    </div>


    <div class="g jjier">
        <h6 class="g rm">
            <span style="float: left;">热门歌手</span>
        </h6>
        <div class="tt">

        </div>
    </div>


</div>



<script src="../../../plugins/jquery.min.js"></script>
<script src="/dev/plugins/layui/layui.js"></script>
<script src="../js/Introduction.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<script>

    // 	var	playlist = [
    // // {title:name,artist:"gname",mp3:"/dev/views/cxy/music/"+name+".mp3",cover:"/dev/views/cxy/music/img/" + img,},
    // {title:"Uptown Funk",artist:"Mark Ronson",mp3:"jq22-1.mp3",cover:"t2.png",},
    // ];
    var time=localStorage.getItem('time');
    // if (time!=null)
    // {

    // }
    // if (time!=0)
    // {
    // 	var isRotate = true;
    // 	var autoplay = true;
    // 	console.log("000")
    // }

    var timet=Math.round(time)
    console.log(timet)
    if (timet!=0)
    {
        var isRotate = true;
        var autoplay = false;

    }else {
        var isRotate = true;
        var autoplay = false;
    }


</script>
<script src="/dev/views/cxy/js/xiaobofang/player.js"></script>
<script>

    function bgChange(){
        var lis= $('.lib');
        for(var i=0; i<lis.length; i+=2)
            lis[i].style.background = 'rgba(246, 246, 246, 0.7)';
    }
    window.onload = bgChange;
</script>

<script>
    $(function(){
        $("#app").load('/dev/views/slx/nav.html');
    })
</script>
<script>
    //拿到所有的歌手
    // let tit=location.search
    // let id=tit.slice(4,5)
    // $(function(){
    //     console.log(id)
    //     $.get(`http://localhost:8088/dev/singer/introduction/${id}`,function(result){
    //         console.log(3)
    //         let arr = result.data
    //         console.log(arr)
    //         loading(arr)
    //     })
    //     //拿到所有的歌
    //     $.get(`http://localhost:8088/dev/song/list/${id}`,function(result){
    //         let arr1 = result.data
    //         console.log(arr1)
    //         song(arr1)
    //         // zi(arr1)
    //     })
    //     //大图
    //     function loading(arr){
    //
    //         let str=`<div class="g tit">
    //            <h4 className = "g name" style = "display: block;font-size: 25px;float: left" >${arr.singerName}</h4>
    //             </div>
    //             <img src="../img/${arr.singerAvatar}" alt="" class="g img">
    //                 </div>`
    //         ;
    //         $(".tt1").html(str);
    //     }
    //     //        table
    //     function song(arr1){
    //         let str=`<tbody>`
    //         for (let i=0;i<arr1.length;i++){
    //             str+=` <tr>
    //                 <th scope="row">${i+1}</th>
    //                 <td >
    //                 <a href="#"style="color: #333">
    //                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
    //                     <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
    //                     </svg></a>
    //                 <a href="http://localhost:8088/dev/views/ccw/lyric.html?id=${arr1[i].id}"style="color: #333;text-align: center">${arr1[i].songTitle}</td>
    //                 <td><a href="#"style="color: #333">
    //                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
    //               <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
    //               <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
    //                 </svg>
    //                 </a>${arr1[i].clicks}</td>
    //                 <td>@mdo</td>
    //                 </tr>`
    //         }
    //         str+=`</tbody>`
    //         $(".caption-top").html(str);
    //     }
    //
    // })


</script>
<script>
    // $(function (){
    //     $.ajax({
    //         type:'Get',
    //         url:'http://localhost:8088/dev/singer/select',
    //         // async: true,//请求是否异步，默认为异步，这也是ajax重要特性
    //         data: "",    //参数值
    //         contentType:"application/json",
    //         success:function(result){
    //             if(result.code==200){
    //                 let arr=result.data
    //                 console.log(arr);
    //                 loadData(arr)
    //             }
    //         }
    //     })
    //     //右边小照片
    //     let str='';
    //     function loadData(arr){
    //         for(let i=0;i<arr.length-4;i++){
    //             str+=` <ul  class="jjier jul"  >
    //                     <li class="rmgs">
    //                         <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}" title=""><img src="../avatar/${arr[i].singerAvatar}" class="rmimg"></a>
    //                         <div class="grma" style="margin-top: 20px">
    //                         <p style="font-size: 12px;"><a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}" class="rma">${arr[i].singerName}</a></p>
    //                         </div>
    //                     </li>
    //                     </ul>`
    //         }
    //         $(".tt").html(str);
    //     }
    // })

</script>
<script>
    //简介

    $(function synopsis(arr){
        $.get(`http://localhost:8088/dev/singer/introduction/${id}`,function(result){
        let arr = result.data
        zi(arr)
    })
        function zi(arr) {
            console.log(arr)
            let str = ''
            str = `  <h2 style=" font-size: 16px;">
                    <i>&nbsp;</i>${arr.singerName}
                    </h2>
                            <p>${arr.singerProfile}</p>`
            $(".singersyn").html(str)
        }
    })
</script>
<script>
    $(function (){
        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })
</script>
</body>
</html>